<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <link rel="stylesheet" href="../css/default.css" />
    <link rel="stylesheet" href="../css/index.css" />
  </head>

  <body>
    <div class="index page-top" id="index">
      <section class="section clearfix">
        <div class="left f-l">
          <p class="one-title title-left">饮水水质监测</p>
          <!-- 顶部导航 -->
          <div class="top">
            <div class="station-all-text-par">
              <span class="item station-all-text">站点总数：</span>
              <p class="item number number-1">
                <span class="number-text">7</span>
              </p>
              <p class="item number number-2">
                <span class="number-text">1</span>
              </p>
              <p class="item number number-3">
                <span class="number-text">个</span>
              </p>
            </div>
            <div class="station-box-par">
              <div class="item station-box online">
                <div class="y-c online-text-box">
                  <p class="number-title">35个</p>
                  <p>正常站点数</p>
                </div>
              </div>
            </div>
            <div class="station-box-par">
              <div class="item station-box outline">
                <div class="y-c outline-text-box">
                  <p class="number-title">14个</p>
                  <p>离线站点数</p>
                </div>
              </div>
            </div>
            <div class="station-box-par">
              <div class="item station-box catch">
                <div class="y-c catch-text-box">
                  <p class="number-title">5个</p>
                  <p>异常站点数</p>
                </div>
              </div>
            </div>
          </div>
          <!-- end -->
          <!-- 地图部分 -->
          <div id="map" class="map-box"></div>
          <!-- end -->
        </div>
        <!-- 右边图表内容 -->
        <div class="right f-r">
          <!-- 顶部标题 -->
          <p class="one-title title-right">对比数据分析</p>
          <!-- end -->
          <!-- 图表部分 -->
          <div class="two-title-box clearfix">
            <div class="station-box f-r">
              <p class="station-a station">A站点名称</p>
              <p class="station-b station">B站点名称</p>
            </div>
            <div class="two-title">
              <p class="text">余氯实时数据监控</p>
            </div>
          </div>

          <div class="chart-box" id="chart-1"></div>

          <div class="two-title-box clearfix">
            <div class="station-box f-r">
              <p class="station-a station">A站点名称</p>
              <p class="station-b station">B站点名称</p>
            </div>
            <div class="two-title">
              <p class="text">PH数据对比</p>
            </div>
          </div>

          <div class="chart-box" id="chart-2"></div>

          <div class="two-title-box clearfix">
            <div class="station-box f-r">
              <p class="station-a station">A站点名称</p>
              <p class="station-b station">B站点名称</p>
            </div>
            <div class="two-title">
              <p class="text">余氯实时数据监控</p>
            </div>
          </div>

          <div class="chart-box" id="chart-3"></div>

          <!-- end -->
        </div>
        <!-- end -->
      </section>

      <!-- 页面底部内容 -->
      <div class="footer clearfix">
        <div class="left f-l">
          <!-- 顶部导航栏 -->
          <div class="title-box-par">
            <div class="title-box">
              <span class="more" id="moreVideoAdress"></span>
              <div class="left-item-box">
                <p class="left-text">视频监控</p>
                <p class="left-item">给我即可地区io</p>
                <p class="left-item">视频监控asda</p>
                <p class="left-item">阿斯顿</p>
                <p class="left-item">视频监控asda</p>
                <p class="left-item">而非就看到司机io</p>
                <p class="left-item">849464156165</p>
                <p class="left-item">849464156165</p>
                <p class="left-item">849464156165</p>
                <p class="left-item">849464156165</p>
              </div>
              <!-- <div class="more-box">
                <div class="drop-box item">
                  彭泽县人民小区
                  <span class="drop item"></span>
                </div>
                <span class="more item">更多</span>
              </div> -->
            </div>
            <ul class="more-list more-list-none " id="moreList">
              <li class="li left-item">视频监控</li>
              <li class="li left-item">给我即可地区io</li>
              <li class="li left-item">视频监控asda</li>
              <li class="li left-item">阿斯顿</li>
            </ul>
          </div>
          <!-- end -->
          <!-- 底部图片视频布尔费 -->
          <ul class="video-box">
            <li class="li">
              <div class="media-box">
                <div class="media">
                  <img
                    src="../images/test-img-1.png"
                    width="100%"
                    height="100%"
                    alt=""
                  />
                </div>
              </div>
              <p class="text">彭泽县居民小区</p>
            </li>
            <li class="li">
              <div class="media-box">
                <div class="media">
                  <img
                    src="../images/test-img-2.png"
                    width="100%"
                    height="100%"
                    alt=""
                  />
                </div>
              </div>
              <p class="text">彭泽县居民小区</p>
            </li>
            <li class="li">
              <div class="media-box">
                <div class="media">
                  <img
                    src="../images/test-img-2.png"
                    width="100%"
                    height="100%"
                    alt=""
                  />
                </div>
              </div>
              <p class="text">彭泽县居民小区</p>
            </li>
          </ul>
          <!-- end -->
        </div>
        <div class="right f-r">
          <!-- 顶部导航栏 -->
          <div class="title-box ">
            <p class="left-text">站点水质质量分析</p>

            <div class="drop-box item month">
              12月
              <span class="drop item"></span>
            </div>
          </div>
          <!-- end -->
          <!-- 表格部分 -->
          <div class="table-box">
            <table class="table" cellspacing="0" cellpadding="0">
              <tr class="thead">
                <td>站点名称</td>
                <td>余氯(mg/L) 合格率</td>
                <td>pH 合格率</td>
                <td>浊度(NTU) 合格率</td>
                <td>质量分析</td>
              </tr>
              <tr class="tbody">
                <td>彭泽县爱华小区</td>
                <td>95.6%</td>
                <td>100%</td>
                <td>99.5%</td>
                <td>良好</td>
              </tr>
              <tr class="tbody">
                <td>彭泽县爱华小区</td>
                <td>95.6%</td>
                <td>100%</td>
                <td>99.5%</td>
                <td>良好</td>
              </tr>
              <tr class="tbody">
                <td>彭泽县爱华小区</td>
                <td>95.6%</td>
                <td>100%</td>
                <td>99.5%</td>
                <td>良好</td>
              </tr>

              <tr class="tbody">
                <td>彭泽县爱华小区</td>
                <td>95.6%</td>
                <td>100%</td>
                <td>99.5%</td>
                <td>良好</td>
              </tr>
              <tr class="tbody">
                <td>彭泽县爱华小区</td>
                <td>95.6%</td>
                <td>100%</td>
                <td>99.5%</td>
                <td>良好</td>
              </tr>
            </table>
          </div>
          <!-- end -->
        </div>
      </div>
    </div>
    <!-- js -->

    <!-- <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=DCoIgWlQutq6T0ZoGHhhXLNSYuzA0Clp"
    ></script> -->
    <script src="../js/lib/jquery/jquery-1.12.4.min.js"></script>
    <!-- <script src="http://api.map.baidu.com/api?v=2.0&ak=DCoIgWlQutq6T0ZoGHhhXLNSYuzA0Clp"></script> -->
    <script src="http://api.map.baidu.com/api?v=2.0&amp;ak=FyI0NOQh8s1Pj8lQ82THbXVY"></script>
    <script src="../js/lib/echarts/index.js"></script>

    <script src="../js/cityMap.js"></script>
    <script>
      var isMoreList = false;
      $("#moreVideoAdress").on("click", function() {
        if (isMoreList) {
          isMoreList = false;
          $("#moreList").addClass("more-list-none");
        } else {
          isMoreList = true;
          $("#moreList").removeClass("more-list-none");
        }
      });
      // echarts图表
      var myChart1 = echarts.init(document.getElementById("chart-1"));
      var myChart2 = echarts.init(document.getElementById("chart-2"));
      var myChart3 = echarts.init(document.getElementById("chart-3"));
      var option = {
        grid: {
          top: 20,
          bottom: 30,
          right: 20
          // left: '10%'
        },
        xAxis: {
          type: "category",
          data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [400, 600, 300, 400, 900, 1330, 800],
            type: "line",
            showSymbol: false,
            smooth: true,
            lineStyle: {
              color: "rgb(220, 205, 43)"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(220, 205, 43,0.7)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 255, 255,0)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          {
            data: [200, 300, 560, 170, 1200, 800, 320],
            type: "line",
            showSymbol: false,
            smooth: true,
            lineStyle: {
              color: "rgb(151, 218, 245)"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(151, 218, 245,0.7)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 255, 255,0)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        ]
      };
      myChart1.setOption(option);
      myChart2.setOption(option);
      myChart3.setOption(option);
    </script>
  </body>
</html>
